<div style="position: relative;left: -24px;">
    <nz-tabset [nzTabPosition]="position" [nzType]="'line'">
        <nz-tab *ngFor="let tab of CourseDataList">
            <ng-template #nzTabHeading>
                {{tab.chapter_name}}
            </ng-template>
            <div>{{tab.chapter_name}}
                <button nz-button (click)="goback()" style="float: right;">返回</button>
            </div>
            <nz-list style="padding-top: 30px" [nzDataSource]="tab.checkList" [nzGrid]="{gutter: 24, lg: 6, md: 8, sm: 12, xs: 24 }">
                <ng-template #item let-item>
                    <nz-list-item>
                        <nz-card nzHoverable style="width: 100%;position: relative">
                            <div class="pro-shadow" *ngIf="item.cour_name != ''">
                                <a (click)="preview(item.p_id,'course')">
                                    <i class="anticon anticon-eye"></i>
                                    <br />查看项目</a>
                            </div>
                            <ng-container *ngIf="item.cour_name!=''" style="width: 100%">
                                <ng-template #cover>
                                    <div [appAutobg]="item.p_image ? (IP_PORT + item.p_image):(IP_PORT + item.p_image)">

                                    </div>
                                </ng-template>
                                <nz-card-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription">
                                    <ng-template #nzTitle>
                                        <a routerLink="" style="color: #656565;">{{item.p_name}}</a>
                                    </ng-template>
                                </nz-card-meta>
                            </ng-container>
                        </nz-card>
                    </nz-list-item>
                </ng-template>
            </nz-list>
        </nz-tab>
    </nz-tabset>
</div>

<!-- <div class="TableBox">
    <div class="TableLeft">
        <ul>
            <li *ngFor="let tab of CourseDataList;let i = index;">
                <em (click)="TabClick(i)" ng-class="{'active' : choiceId == i}">
                    {{tab.chapter_name}}
                </em>
            </li>
        </ul>
    </div>
    <div class="TableRight">
        <div class="ChoiceBox" *ngFor="let tab of CourseDataList;let k = index;">
            <div *ngIf="choiceId == k">
                <div>{{tab.chapter_name}}
                    <button nz-button (click)="goback()" style="float: right;">返回</button>
                </div>
                <nz-list style="padding-top: 30px" [nzDataSource]="tab.checkList" [nzGrid]="{gutter: 24, lg: 6, md: 8, sm: 12, xs: 24 }">
                    <ng-template #item let-item>
                        <nz-list-item>
                            <nz-card nzHoverable style="width: 100%;position: relative">
                                <div class="pro-shadow" *ngIf="item.cour_name != ''">
                                    <a (click)="preview(item.p_id,'course')">
                                        <i class="anticon anticon-eye"></i>
                                        <br />查看项目</a>
                                </div>
                                <ng-container *ngIf="item.cour_name!=''" style="width: 100%">
                                    <ng-template #cover>
                                        <div [appAutobg]="item.p_image ? (IP_PORT + item.p_image):(IP_PORT + item.p_image)">

                                        </div>
                                    </ng-template>
                                    <nz-card-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription">
                                        <ng-template #nzTitle>
                                            <a routerLink="" style="color: #656565;">{{item.p_name}}</a>
                                        </ng-template>
                                    </nz-card-meta>
                                </ng-container>
                            </nz-card>
                        </nz-list-item>
                    </ng-template>
                </nz-list>
            </div>
        </div>
    </div>
</div> -->



<!--
<nz-table #nzTable2 [nzDataSource]="CourseDataList" [nzPageSize]="10" style="margin-top: 50px;">
    <thead nz-thead>
        <tr>
            <th nz-th style="width:20%">
                <span>章节名称</span>
            </th>
            <th nz-th style="width:80%">
                <span>关联项目</span>
            </th>
        </tr>
    </thead>
    <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of CourseDataList;">
            <td nz-td>{{data.chapter_name}}</td>
            <td nz-td>
                <span *ngFor="let checkList of data.checkList;" style="margin:0 5px;">
                    <a (click)="preview(checkList.p_id,'course')">
                        {{checkList.p_name}}
                    </a>
                </span>
            </td>
        </tr>
    </tbody>
</nz-table> -->
